<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Super Agent Party Chat</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">
<!-- Markdown + 代码高亮 -->
<link rel="stylesheet" href="github-markdown-dark.css"/>
<link rel="stylesheet" href="prism-tomorrow.min.css"/>
<script src="marked.min.js"></script>
<script src="prism.min.js"></script>
<!-- 按需加载常用语言（自己再补） -->
<script src="prism-python.min.js"></script>
<script src="prism-javascript.min.js"></script>
<script src="prism-css.min.js"></script>
<style>
:root{
  /* ---- 深色高对比 ---- */
  --bg:#1e1f20;              /* 主背景 */
  --bg-assistant:#25262a;    /* AI 气泡 */
  --text:#e8e8e8;            /* 主文字 */
  --text-light:#8a8f9b;      /* 次要文字 */
  --accent:#00c2a8;          /* 发送按钮/AI 图标 */
  --border:#333538;          /* 分割线 */
  --radius:12px;             /* 圆角 */
  --shadow:0 8px 24px rgba(0,0,0,.36);

  /* ---- 字体 ---- */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;font-family:var(--font);}
html,body{height:100%;}
body{
  display:flex;
  flex-direction:column;
  background:var(--bg);
  color:var(--text);
  font-size:15px;
  line-height:1.6;
}

/* ---------- 顶部栏 ---------- */
header{
  height:56px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px;
  background:#232427;
}
header .logo{
  font-weight:600;
  font-size:18px;
  display:flex;
  align-items:center;
  gap:8px;
}
header .logo i{color:var(--accent);}

/* ---------- 聊天区 ---------- */
#messages{
  flex:1;
  overflow-y:auto;
  scroll-behavior:smooth;
  padding:0 24px 24px;
}
.msg{
  display:flex;
  padding:16px 0;
  border-bottom:1px solid var(--border);
}
.msg.user{
  justify-content:flex-end;
}
.msg.assistant{
  justify-content:flex-start;
}
.msg.system{
  justify-content:center;
  font-style:italic;
  color:var(--text-light);
  font-size:14px;
}
.msg-inner{
  max-width:640px;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.msg.user .msg-inner{flex-direction:row-reverse;}
.msg .icon{
  width:32px;
  height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  flex-shrink:0;
}
.msg.user .icon{background:#3c3d40;color:var(--text-light);}
.msg.assistant .icon{background:var(--accent);color:#fff;}
.msg .bubble{
  padding: 12px 16px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  word-break: break-word;
  /* 新增 */
  line-height: 1.65;
}
/* 对 assistant 气泡里的 Markdown 再做一次细节覆盖 */
.msg.assistant .bubble.markdown-body{
  background: var(--bg-assistant);
  color: var(--text);
  font-size: 15px;
}
/* 代码块夜间适配 */
.markdown-body pre{
  background: #282c34 !important;
  padding: 12px 16px;
  border-radius: 6px;
  overflow-x: auto;
}
.markdown-body code{
  background: rgba(0,0,0,.25);
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 14px;
}
.msg.user .bubble{background:#008270;color:#fff;}
.msg.assistant .bubble{background:var(--bg-assistant);}

/* ---------- 空态 ---------- */
#empty{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:var(--text-light);
  gap:8px;
}
#empty i{font-size:40px;}

/* ---------- 输入区 ---------- */
#inputBar{
  border-top:1px solid var(--border);
  background:#232427;
  padding:16px 24px;
}
#inputWrap{
  max-width:768px;
  margin:0 auto;
  display:flex;
  gap:12px;
  align-items:center;   /* 原来是 flex-end，改成 center */
}
#userInput{
  flex:1;
  background:#2a2b2e;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:10px 14px;
  resize:none;
  max-height:120px;
  min-height:44px;
  line-height:1.5;
  font-size:15px;
  color:var(--text);
}
#userInput:focus{outline:none;border-color:var(--accent);}
#sendBtn{
  width:44px;
  height:44px;          /* 与输入框保持一致 */
  border-radius:var(--radius);
  background:linear-gradient(135deg,var(--accent),#00a896);
  border:none;
  color:#fff;
  cursor:pointer;
  font-size:18px;
  display:flex;
  align-items:center;
  justify-content:center;
}
#sendBtn:disabled{opacity:.4;cursor:not-allowed;}
#hint{
  text-align:center;
  font-size:12px;
  color:var(--text-light);
  margin-top:6px;
}
/* ---------- 聊天区域自定义滚动条 ---------- */
#messages::-webkit-scrollbar{
  width: 6px;                /* 细一点 */
}
#messages::-webkit-scrollbar-track{
  background: transparent;   /* 轨道透明 */
}
#messages::-webkit-scrollbar-thumb{
  background: var(--border); /* 跟分割线同色 */
  border-radius: 3px;
}
#messages::-webkit-scrollbar-thumb:hover{
  background: var(--text-light); /* 悬停高亮 */
}
/* Firefox */
#messages{ scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

/* ---------- 清空按钮 ---------- */
#clearBtn{
  width:44px;
  height:44px;
  border-radius:var(--radius);
  background:transparent;
  border:1px solid var(--border);
  color:var(--text-light);
  cursor:pointer;
  font-size:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .2s;
}
#clearBtn:hover{
  background:rgba(255,255,255,.05);
  color:var(--accent);
  border-color:var(--accent);
}
</style>
</head>
<body>
  <header>
    <div class="logo"><i class="fa-solid fa-robot"></i>Super Agent Party Chat</div>
    <span style="font-size:14px;color:var(--text-light)">Enter 发送 · Shift+Enter 换行</span>
  </header>

  <main id="messages">
    <div id="empty">
      <i class="fa-regular fa-comments"></i>
      <span>No messages yet</span>
    </div>
  </main>

  <footer id="inputBar">
    <div id="inputWrap">
      <!-- 新增清空按钮 -->
      <button id="clearBtn" title="清空消息"><i class="fa-solid fa-trash"></i></button>
      <textarea id="userInput" placeholder="Send a message…"></textarea>
      <button id="sendBtn"><i class="fa-solid fa-paper-plane"></i></button>
    </div>
  </footer>

<script>
/* ========== 与原代码逻辑完全一致，仅变量名简化 ========== */
const $ = s => document.querySelector(s);
const msgs = $('#messages');
const input = $('#userInput');
const btn   = $('#sendBtn');
const clearBtn = $('#clearBtn');   // 新增
let ws;

function initWS(){
  const proto = location.protocol==='https:' ? 'wss:' : 'ws:';
  ws = new WebSocket(`${proto}//${location.host}/ws`);
  ws.onopen    = () => ws.send(JSON.stringify({type:'get_messages'}));
  ws.onclose   = () => setTimeout(initWS,5000);
  ws.onmessage = e => {
    try{
      const d = JSON.parse(e.data);
      if(d.type==='messages_update'||d.type==='broadcast_messages') render(d.data.messages);
    }catch{}
  };
}
function render(list){
  if(!list || !list.length){
    msgs.innerHTML = `<div id="empty"><i class="fa-regular fa-comments"></i><span>No messages yet</span></div>`;
    return;
  }
  msgs.innerHTML = list.map(m=>{
    if(m.role==='system') return '';                 // ① 不渲染 system
    const isCode = m.role==='assistant';
    let html = isCode
        ? marked.parse(m.pure_content ||'')              // ② Markdown -> HTML
        : m.pure_content || m.content || '';
    return `
      <div class="msg ${m.role}">
        <div class="msg-inner">
          <div class="icon">
            ${m.role==='user'?'<i class="fa-solid fa-user"></i>':'<i class="fa-solid fa-robot"></i>'}
          </div>
          <div class="bubble ${isCode?'markdown-body':''}">${html}</div>
        </div>
      </div>`;
  }).join('');
  msgs.scrollTop = msgs.scrollHeight;
  /* ③ 高亮代码块 */
  Prism.highlightAllUnder(msgs);
}
function send(){
  const t = input.value.trim();
  if(!t) return;
  ws.send(JSON.stringify({type:'set_user_input',data:{text:t}}));
  ws.send(JSON.stringify({type:'trigger_send_message'}));
  input.value=''; input.style.height='auto';
}
function clear(){
  ws.send(JSON.stringify({type:'trigger_clear_message'}));
}
input.addEventListener('input',()=>{ autoHeight(); ws.send(JSON.stringify({type:'set_user_input',data:{text:input.value}})); });
input.addEventListener('keydown',e=>{ if(e.key==='Enter' && !e.shiftKey){ e.preventDefault(); send(); }});
btn.addEventListener('click',send);
clearBtn.addEventListener('click',clear);   // 新增
function autoHeight(){ input.style.height='auto'; input.style.height=input.scrollHeight+'px'; }
initWS();
</script>
</body>
</html>